<template>
  <dv-border-box-12 id="dv-border-box">
    <div class="title">运营管理评价</div>
    <el-row style="width:100%">
      <el-col :span="6">
        <div class="block">
          <div class="div-score">
            FOSI: <span class="span-score">{{ score }}分</span>
          </div>
          <el-image style="width: 55%; margin: 0% 20% 10% 30%;" :src="imgUrl" fit="fill"></el-image>
        </div>
      </el-col>
      <el-col :span="9">
        <div>
          <div class="appraise-item" v-for="item in appraiseDataLeft" :key="item.title">
            <div style="width: 30%;float: left;">
              <el-image style="width: 80%;margin-left: 30%;" :src="item.imgUrl" fit="fill"></el-image>
            </div>
            <div style="width: 70%;float:left;">
              <div class="appraise-item-title">{{ item.title }}</div>
              <div class="appraise-item-div">
                <dv-digital-flop :config="item.number" style="width:100px;height:50px;" />
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="9">
        <div>
          <div class="appraise-item" v-for="item in appraiseDataRight" :key="item.title">
            <div style="width: 30%;float: left;">
              <el-image style="width: 80%;margin-left: 30%;" :src="item.imgUrl" fit="fill"></el-image>
            </div>
            <div style="width: 70%;float:left;">
              <div class="appraise-item-title">{{ item.title }}</div>
              <div class="appraise-item-div">
                <dv-digital-flop :config="item.number" style="width:100px;height:50px;" />
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </dv-border-box-12>
</template>

<script>
export default {
  name: 'WeekFlop',
  data() {
    return {
      appraiseDataLeft: [],
      appraiseDataRight: [],
      imgUrl: '',
      medal: {
        // eslint-disable-next-line global-require
        excellence: require('@/assets/img/appraise/score-excellence.png'),
        // eslint-disable-next-line global-require
        good: require('@/assets/img/appraise/score-good.png'),
        // eslint-disable-next-line global-require
        nice: require('@/assets/img/appraise/score-nice.png'),
        // eslint-disable-next-line global-require
        pass: require('@/assets/img/appraise/score-pass.png')
      },
      score: 0
    }
  },
  methods: {
    getMedal(score) {
      if (score >= 96) {
        return this.medal.excellence
      } else if (score >= 81) {
        return this.medal.good
      } else if (score >= 61) {
        return this.medal.nice
      } else {
        return this.medal.pass
      }
    },
    createData() {
      this.$ajax.get('/sys/appraise/getOne').then(resp => {
        if (!resp.data) {
          return
        }
        let data = resp.data
        this.score = data.score
        this.imgUrl = this.getMedal(this.score)

        this.appraiseDataLeft = [
          {
            title: '库存周转率',
            // eslint-disable-next-line global-require
            imgUrl: require('@/assets/img/appraise/icon-rotation-rate.png'),
            number: {
              number: [data.rotationRate],
              content: '{nt}次/月',
              toFixed: 1,
              style: {
                fill: '#4d99fc',
                fontWeight: 'bold',
                fontSize: 18
              }
            }
          },
          {
            title: '备货满足率',
            // eslint-disable-next-line global-require
            imgUrl: require('@/assets/img/appraise/icon-choice.png'),
            number: {
              number: [data.choiceRate],
              content: '{nt}%',
              toFixed: 1,
              style: {
                fill: '#4d99fc',
                fontWeight: 'bold',
                fontSize: 18
              }
            }
          }
        ]
        this.appraiseDataRight = [
          {
            title: '平均周转天数',
            // eslint-disable-next-line global-require
            imgUrl: require('@/assets/img/appraise/icon-turnover.png'),
            number: {
              number: [data.turnoverDays],
              content: '{nt}天',
              toFixed: 1,
              style: {
                fill: '#4d99fc',
                fontWeight: 'bold',
                fontSize: 18
              }
            }
          },
          {
            title: '采购响应率',
            // eslint-disable-next-line global-require
            imgUrl: require('@/assets/img/appraise/icon-purchase-rate.png'),
            number: {
              number: [data.purchaseRate],
              content: '{nt}%',
              toFixed: 1,
              style: {
                fill: '#4d99fc',
                fontWeight: 'bold',
                fontSize: 18
              }
            }
          }
        ]
      })
    }
  },
  mounted() {
    const { createData } = this

    createData()

    setInterval(createData, 1800000)
  }
}
</script>

<style lang="scss">
#dv-border-box {
  position: relative;
  height: 25%;
  width: 100%;
  background-color: rgba(6, 30, 93, 0.5);
  border-top: 2px solid rgba(1, 153, 209, 0.5);
}
.title {
  height: 20%;
  font-weight: bold;
  text-indent: 20px;
  font-size: 20px;
  display: flex;
  align-items: center;
}
.appraise-item {
  text-align: center;
  margin: 5% 0;
  flex-shrink: 0;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
}
.appraise-item-title {
  font-weight: bold;
  font-size: 18px;
}
.appraise-item-div {
  margin-left: 20%;
}
.div-score {
  font-weight: bold;
  font-size: 20px;
  width: 100%;
  margin: 5% 20%;
}
.span-score {
  color: rgb(30, 144, 255);
  font-weight: bold;
  font-size: 20px;
}
</style>
